import type { GoogleElements } from '../../../../../../../../types/constants/personalization/google'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { GOOGLE_SEARCH_DROPDOWN_CONTAINER_SELECTOR } from '../../../../../../../../lib/page_handler/platform/google/types'
import {
  AppStyleCollections,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'

export class GoogleIndexPage {
  elements: GoogleElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GOOGLE]
  private static instance: GoogleIndexPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): GoogleIndexPage {
    if (!GoogleIndexPage.instance) {
      GoogleIndexPage.instance = new GoogleIndexPage()
    }
    return GoogleIndexPage.instance
  }

  init(): void {
  }

  hideSearchStyles(): string {
    return `
  > div > div[jscontroller] {
    > div[jsname]:not([jscontroller]) {
      border-radius: 26px !important;
    }
    
    /* 下拉菜单 */
    > div[jsname][jscontroller] {
      display: none !important;
    }
  }
  `
  }

  getMainStyles(): string {
    return `
  /* 有壁纸时，页脚透明 */  
  &.${AppStyleCollections.Wallpaper.EXISTS} {    
    div[role=navigation] {
      background-color: transparent !important;
    }
  }

  /* 搜索历史隐藏、搜索建议隐藏 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"][${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    form[role=search] {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史隐藏、搜索建议显示 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"]:not([${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}]) {
    /* 无搜索建议 */
    form[role=search][${AppStyleCollections.Search.attr.IS_SUGGESTIONS_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史显示、搜索建议隐藏 */
  &:not([${AppStyleCollections.Search.attr.HIDE_HISTORY}])[${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    /* 无搜索历史 */
    form[role=search][${AppStyleCollections.Search.attr.IS_HISTORY_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
    
    /* 隐藏不当联想反馈 */
    form[role=search] {
      > div > div[jscontroller] {
      
        /* 下拉菜单 */
        > div[jsname][jscontroller] {
          > div:has(> div[role="button"]) {
            display: none !important;
          }
        }
      }
    }
  }
  
  /* 顶部菜单 */
  div[role=navigation] {
    background-color: var(${this.themeVarService.search.header.background}) !important;
    
    > a {
      color: var(${this.themeVarService.search.default.text}) !important;
      
      &:hover {
        color: var(${this.themeVarService.link.default.text}) !important;
        text-decoration: none !important;
      }
    }
    
    header {
      div {
        a {
          color: var(${this.themeVarService.search.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.text}) !important;
            text-decoration: none !important;
          }
        }
      }
    }
  }
  
  /* 搜索框*/
  .${AppStyleCollections.Search.class.SEARCH_CONTAINER} {
    .${AppStyleCollections.Search.class.SEARCH_BOX} {
      box-shadow: none !important;
    }
    
    div[role=presentation] > ul[role=listbox] > li {
      &:hover {
        div[role=option] > div[role=presentation] > span {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
      }
    }
  }
  
  /* 搜索历史 */
  ${GOOGLE_SEARCH_DROPDOWN_CONTAINER_SELECTOR} {
    > li:has(div[role=button][jsaction][jsaction^=click]) {
      span {
        color: var(${this.themeVarService.search.history.text}) !important;
      }
    }
  }
  
  /* 可选语言 */
  div[id*=homepage_additional_languages] {
    div {
      color: var(${this.themeVarService.search.default.text}) !important;
      
      a {
        color: var(${this.themeVarService.link.default.text}) !important;
      }
    }
  }
  
  /* 页脚 */
  div[role=contentinfo] {
    display: flex !important;
    justify-content: center !important;
    background-color: transparent !important;
    
    div[jscontroller] {    
      div {
        a {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.textHover}) !important;
            text-decoration: none !important;
          }
        }
      }
    }
  }
`
  }
}
